/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect } from 'react';
import Cookies from 'js-cookie';
import { Spin } from 'antd';
import { Link } from 'react-router-dom';
import qs from 'qs';
import { If } from 'babel-plugin-jsx-control-statements';
import RequestApi from '@/utils/request';
import css from './index.scss';

/**
 * 待办中心
 * -
 */
export default () => {
	const distinctId = Cookies.get('distinctId');
	const [data, setData] = useState();
	const [loading, setLoading] = useState(true);
	useEffect(() => {
		RequestApi.connection('get', `parkLotRecordTask/getAgentCenterInfo/${distinctId}`).then((response) => {
			setLoading(false);
			setData(response.data);
		});
	}, []);
	return (
		<If condition={data !== undefined}>
			<Spin spinning={loading} tip="登录中...">
				<div className={css.home}>
					<div className={css.header}>
						<div style={{ float: 'left', fontWeight: 'bold', fontSize: '16px' }}>
							<h3>备案申请/变更审核</h3>
						</div>
					</div>
					<div className={css.content}>
						<div className={css.record}>
							<h4>资料初审</h4>
							<div className={css.block}>
								<Link
									to={{
										pathname: `/todo-details`,
										search: qs.stringify({ name: '资料初审', stage: 1, index: 1 }),
									}}
								>
									<p style={{ color: 'black' }}>待处理</p>
									<h3>{data['1'].pending}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link
									to={{
										pathname: `/todo-details`,
										search: qs.stringify({ name: '资料初审', stage: 1, index: 2 }),
									}}
								>
									<p style={{ color: 'black' }}>即将过期处理</p>
									<h3>{data['1'].overTiming}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link
									to={{
										pathname: `/todo-details`,
										search: qs.stringify({ name: '资料初审', stage: 1, index: 3 }),
									}}
								>
									<p style={{ color: 'black' }}>过期处理</p>
									<h3>{data['1'].overTimed}</h3>
								</Link>
							</div>
							<br />
							<div className={css.block}>
								<Link
									to={{
										pathname: `/todo-details`,
										search: qs.stringify({ name: '资料初审', stage: 1, index: 4 }),
									}}
								>
									<p style={{ color: 'black' }}>已处理</p>
									<h3>{data['1'].handled}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link
									to={{
										pathname: `/todo-details`,
										search: qs.stringify({ name: '资料初审', stage: 1, index: 5 }),
									}}
								>
									<p style={{ color: 'black' }}>已退回</p>
									<h3>{data['1'].returned}</h3>
								</Link>
							</div>
						</div>
						<div className={css.record}>
							<h4>现场勘查</h4>
							<div className={css.block}>
								<Link
									to={{ pathname: `/todo-details`, search: qs.stringify({ name: '现场勘查', stage: 2, index: 1 }) }}
								>
									<p style={{ color: 'black' }}>待处理</p>
									<h3>{data['2'].pending}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link
									to={{ pathname: `/todo-details`, search: qs.stringify({ name: '现场勘查', stage: 2, index: 2 }) }}
								>
									<p style={{ color: 'black' }}>即将过期处理</p>
									<h3>{data['2'].overTiming}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link
									to={{ pathname: `/todo-details`, search: qs.stringify({ name: '现场勘查', stage: 2, index: 3 }) }}
								>
									<p style={{ color: 'black' }}>过期处理</p>
									<h3>{data['2'].overTimed}</h3>
								</Link>
							</div>
							<br />
							<div className={css.block}>
								<Link
									to={{ pathname: `/todo-details`, search: qs.stringify({ name: '现场勘查', stage: 2, index: 4 }) }}
								>
									<p style={{ color: 'black' }}>已处理</p>
									<h3>{data['2'].handled}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link
									to={{ pathname: `/todo-details`, search: qs.stringify({ name: '现场勘查', stage: 2, index: 5 }) }}
								>
									<p style={{ color: 'black' }}>已退回</p>
									<h3>{data['2'].returned}</h3>
								</Link>
							</div>
						</div>
						<div className={css.record}>
							<h4>复审</h4>
							<div className={css.block}>
								<Link to={{ pathname: `/todo-details`, search: qs.stringify({ name: '复审', stage: 3, index: 1 }) }}>
									<p style={{ color: 'black' }}>待处理</p>
									<h3>{data['3'].pending}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link to={{ pathname: `/todo-details`, search: qs.stringify({ name: '复审', stage: 3, index: 2 }) }}>
									<p style={{ color: 'black' }}>即将过期处理</p>
									<h3>{data['3'].overTiming}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link to={{ pathname: `/todo-details`, search: qs.stringify({ name: '复审', stage: 3, index: 3 }) }}>
									<p style={{ color: 'black' }}>过期处理</p>
									<h3>{data['3'].overTimed}</h3>
								</Link>
							</div>
							<br />
							<div className={css.block}>
								<Link to={{ pathname: `/todo-details`, search: qs.stringify({ name: '复审', stage: 3, index: 4 }) }}>
									<p style={{ color: 'black' }}>已处理</p>
									<h3>{data['3'].handled}</h3>
								</Link>
							</div>
							<div className={css.block}>
								<Link to={{ pathname: `/todo-details`, search: qs.stringify({ name: '复审', stage: 3, index: 5 }) }}>
									<p style={{ color: 'black' }}>已退回</p>
									<h3>{data['3'].returned}</h3>
								</Link>
							</div>
						</div>
					</div>
				</div>
			</Spin>
		</If>
	);
};
